<template>
  <view class="DailyPractice flex flex-column">
    <u-toast ref="uToast"></u-toast>
    <view class="f_1 scroll-y main">
      <Step1 v-if="step === 1 && detail" @updatePostParams="updatePostParams"></Step1>
      <Step2 v-if="step === 2 && postParams.practiceType && detail" @updatePostParams="updatePostParams"></Step2>
      <Step3 v-if="step === 3 && detail" @updatePostParams="updatePostParams"></Step3>
    </view>
  </view>
</template>
<script>
import StepNav from "./components/StepNav.vue";
import Step1 from "./components/step1/index.vue";
import Step2 from "./components/step2/index.vue";
import Step3 from "./components/step3/index.vue";
import { getPracticeSet, publishPractice, existStudentJoin } from "@/improve/services";
import { titleMap } from '@/improve/components/enum'

export default {
  name: "DailyPractice",
  components: { Step3, Step2, Step1, StepNav },
  provide() {
    return {
      prop_postParams: () => null,
      prop_practice: () => this.detail,
      pro_practiceType: () => this.postParams.practiceType
    };
  },
  data() {
    return {
      step: 1,
      detail: null,
      postParams: {
        practiceType: null,
        upgPracticeUuid: "",
      }
    }
  },
  methods: {
    getDetails() {
      getPracticeSet(this.postParams.upgPracticeUuid).then(res => {
        this.detail = res;
      })
    },
    updatePostParams(json) {
      // 判断是否有人加入练习
      existStudentJoin({ upgPracticeUuid: this.postParams.upgPracticeUuid }).then(res => {
        if (res) {
          uni.showModal({
            title: '提示',
            content: '当前已有人在练习，修改后将清空所有练习记录，是否继续？',
            success: async (res) => {
              if (res.confirm) {
               this.editPractice(json)
              }
            }
          });
        } else {
          this.editPractice(json)
        }
      })

    },
    editPractice(json) {
      this.postParams = { ...this.postParams, ...json };
      publishPractice(this.postParams).then(() => {
        this.$refs.uToast.show({
          type: "success",
          message: "提交成功",
        });
        setTimeout(() => {
          uni.navigateBack(); //返回上一页
        }, 500);

      })
    }
  },
  onLoad(options) {
    this.postParams.practiceType = options.practiceType ?? '1';
    this.postParams.upgPracticeUuid = options.upgPracticeUuid
    this.step = options.step ? parseInt(options.step) : 1;
    this.getDetails()
    wx.setNavigationBarTitle({
      title: titleMap[options.practiceType]
    });
  }
}
</script>
<style scoped lang="scss">
.DailyPractice {
  width: 100%;
  height: 100vh;
  background-color: #FFFFFF;

  .main {
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }


  ::v-deep.line {
    width: 100%;
    background-color: #F5F5F5;
  }

  ::v-deep .btn-item {
    padding-top: 20px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    position: fixed;
    background-color: #FFFFFF;
    box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.12);
    bottom: 0;
    width: 100%;
    z-index: 99;

    .btn {
      background-color: #37B874;
      border-radius: 24rpx;
      width: calc(100% - 40px);
      height: 90rpx;
      text-align: center;
      line-height: 90rpx;
      font-size: 32rpx;
      color: #FFFFFF;
      margin-left: 20px;
    }
  }
}

::v-deep .u-popup__content {
  width: 100vw;
  max-height: 85vh;
  overflow-y: scroll;
  flex: inherit !important;
}

::v-deep .select-wr {
  .u-input {
    width: 96px !important;
    height: 40px;
    background-color: #F9F9F9;
    flex: inherit;

    input {
      width: 100%;
      height: 100%;
      line-height: 40px;
      text-align: center !important;
    }
  }
}

::v-deep .u-form {

  /*.u-form-item:nth-child(1),.u-form-item:nth-child(2){*/
  .u-form-item__body__right__message {
    margin-left: 0 !important;
    display: none;
  }

  /* }*/
  .u-form-item__body {
    padding: 18px 15px 18px 26px !important;

    .u-line {
      border-color: #F2F2F2 !important;
    }
  }

  .u-form-item__body__left {
    width: fit-content !important;

    .u-form-item__body__left__content__label {
      font-size: 32rpx !important;
      margin-left: 8rpx;
      color: #333333;
    }
  }

  .u-textarea {
    background-color: #F9F9F9 !important;
    margin-top: 16rpx;

    textarea {
      background-color: #F9F9F9;
      font-size: 32rpx;
      color: #333333;
    }
  }

  .u-input {
    input {
      text-align: right !important;
      font-size: 16px !important;
      padding-right: 36rpx;
    }
  }

  .score {
    .u-input {
      width: 90px !important;
      height: 40px;
      background-color: #F9F9F9;
      flex: inherit;
      margin-right: 48rpx;

      input {
        width: 100%;
        height: 100%;
        line-height: 40px;
        text-align: center !important;
      }
    }

  }

  .uni-select {
    border: none !important;
  }

  .uni-select__input-text {
    text-align: center;
  }

}
</style>